<!DOCTYPE html>
<html lang="en-gb" data-ng-app="monospaced.qrcode" id="ng-app">
<head>
  <meta charset="utf-8">
  <title>Angular QR Code</title>
  <!--[if lte IE 8]>
    <script>document.createElement('qrcode');</script>
  <![endif]-->
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="//necolas.github.io/normalize.css/2.1.1/normalize.css">
  <style>
    html {
      overflow-y: scroll;
      background: #fff;
      color: #1c000e;
    }
    body {
      margin: 16px;
      text-align: center;
    }
    h1 {
      margin: 0 8px 8px;
      font-weight: normal;
      font-size: 30px;
    }
    h2 {
      margin: 24px 8px;
      font-weight: normal;
      font-size: 24px;
    }
    small {
      display: block;
      clear: both;
      margin: 0 8px;
    }
    p,
    pre {
      overflow: hidden;
      margin: 16px 0;
    }
    form {
      margin: 0 auto 8px;
      width: 274px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    label {
      float: left;
      width: 60px;
      color: #888;
      text-align: left;
      line-height: 2.125;
      cursor: pointer;
    }
    input,
    textarea {
      float: right;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
      padding: 7px 3px 7px 7px;
      width: 204px;
      border: 1px solid #ccc;
    }
    textarea {
      resize: vertical;
    }
    select {
      float: right;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
      padding: 7px 3px 7px 7px;
      width: 204px;
      height: 34px;
      border: 1px solid #ccc;
    }
    a {
      color: #000;
      text-decoration: none;
      -webkit-transition: all 250ms ease-in-out;
         -moz-transition: all 250ms ease-in-out;
           -o-transition: all 250ms ease-in-out;
              transition: all 250ms ease-in-out;
    }
    a:hover,
    a:focus,
    a:active {
      color: #0067ce;
      -webkit-transition: none;
         -moz-transition: none;
           -o-transition: none;
              transition: none;
    }
    .qrcode {
      display: block;
      margin: 24px auto 16px;
      max-width: 100%;
    }
    .qrcode-link {
      display: table;
      margin: 24px auto 16px;
    }
    .qrcode-link .qrcode {
      margin: 0;
    }
    .footer {
      margin: 16px auto;
      width: 290px;
    }
  </style>
</head>
<body data-ng-init="foo='here comes qr!';bar='https://github.com/monospaced/angular-qrcode';e='M';s=274;">

  <h1>Angular QR Code</h1>

  <pre>&lt;qrcode&gt;&lt;/qrcode&gt;</pre>

  <qrcode error-correction-level="{{e}}" size="{{s}}" data="{{foo}}" color="#FF69B4" background="#000"></qrcode>

  <form>
    <p>
      <label for="data">Data</label>
      <textarea id="data" data-ng-model="foo"></textarea>
    </p>
    <p>
      <label for="size">Size</label>
      <input id="size" type="number" data-ng-model="s">
    </p>
    <p>
      <label for="level" title="Error Correction Level">Level</label>
      <select id="level" data-ng-model="e" data-ng-options="option.version as option.name for option in [{name:'Low', version:'L'},{name:'Medium', version:'M'},{name:'Quartile', version:'Q'},{name:'High', version:'H'}]"></select>
    </p>
  </form>

  <h2>Downloadable</h2>

  <qrcode error-correction-level="{{e}}" size="{{s}}" data="{{foo}}" download></qrcode>

  <h2>Linked</h2>

  <qrcode size="274" data="{{bar}}" href="{{bar}}"></qrcode>

  <form>
    <p>
      <label for="data">Data</label>
      <textarea id="data" data-ng-model="bar"></textarea>
    </p>
  </form>

  <div class="footer">

    <small>
      <a href="http://monospaced.github.io/">Monospaced Labs</a>
    </small>

  </div>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <script src="//kazuhikoarase.github.io/qrcode-generator/assets/qrcode.js"></script>
  <script src="angular-qrcode.js"></script>
</body>
</html>
